<!-- 父组件 -->
<template>
  <div id="parent">
    <!-- 绑定子组件ref，可获取子组件的vue实例对象 -->
    <child ref="child"></child>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  components: { Child },
  methods: {
    // 点击获取用户信息按钮，调用
    getUserInfo() {
      // 获取child组件实例
      // 可以获取、修改child中的data数据，也可以调用child组件中的方法
      // 使用了对象解构赋值，下面一行代码同等于
      // const child = this.$refs.child
      const { child } = this.$refs // 同等于child子组件的this
      console.log(child.userInfo.name) // '张三'；当点击获取用户信息时，触发
    },
  },
}
</script>

<style lang="scss" scoped></style>
